<!--时间，没有ID-->
<template>
  <el-time-picker
    v-model="mytime"
    v-bind="$attrs"
    :name="'c' + formItemMeta.columnId"
    :clearable="clearable"
    :is-range="formItemMeta.controlType === 131"
    :format="showFormat"
    @change="myChange"
  >
  </el-time-picker>
</template>

<script lang="ts">
  import { ref, watch, defineComponent } from 'vue'
  // import { ElTimePicker } from 'element-plus'
  // 引入组件需要的属性 引入表单子控件的管理类
  import { itemProps, itemController } from '../map'

  /**
   * 日期管理类
   * * 功能：
   * ** 按照类型提交数据，不是date()
   * ** 监听属性，设置value
   * * 参数：
   * ** value： control类的value
   * ** mySubmit： control类的mySubmit，直接就提交了
   * ** controlType：属性里的控件类型
   * * 返回
   * ** 绑定控件的 mydate
   * ** change 事件的 myChange
   */
  const timeManage = (value) => {
    // 日期控件用的v-model，便于做类型转换
    const mytime = ref('') // new Date('1900-1-1 00:00:00')

    const getTime = (_val) => {
      const hour = _val.getHours().toString().padStart(2, '0')
      const mm = _val.getMinutes().toString().padStart(2, '0')
      const ss = _val.getSeconds().toString().padStart(2, '0')
      const re = `${hour}:${mm}:${ss}`
      return re
    }

    if (typeof value.value === 'string') {
      if (value.value !== '') {
        mytime.value = new Date('1900-1-1 ' + value.value)
      }
    }

    // 监听属性，设置给 mydate
    watch(() => value.value, (v1, v2) => {
      if (typeof value.value === 'string') {
        if (value.value !== '') {
          mytime.value = new Date('1900-1-1 ' + value.value)
        }
      }
    })

    // 向父组件提交数据。
    const myChange = (_val) => {
      if (_val) {
        if (typeof _val === 'string') {
          value.value = _val
        } else if (Array.isArray(_val)) {
          // 时间范围
          const re1 = getTime(_val[0])
          const re2 = getTime(_val[0])
          value.value = [re1, re2] // 提交给父组件
        } else {
          // 一个时间
          value.value = getTime(_val) // 提交给父组件
        }
      }
      // console.log('时间的 picker：', _val)
    }

    return {
      mytime,
      myChange
    }
  }

  export default defineComponent({
    name: 'nf-el-from-item-time-picker',
    inheritAttrs: false,
    components: {
      // ElTimePicker
    },
    props: {
      ...itemProps, // 基础属性
      showFormat: { // 返回数据的格式化。date：日期类型
        type: String,
        default: 'HH:mm:ss'
      },
      returnFormat: { // 返回数据的格式化。date：日期类型
        type: String,
        default: 'HH:mm:ss'
      },
      colName: String, // 变更字段名称
      modelValue: [String, Date]
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      const { value } = itemController(props, context.emit)

      const { mytime, myChange } = timeManage(value)
      return {
        mytime,
        myChange
      }
    }
  })
</script>
